<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34"
    ></script>
    <!-- 初始化地图 -->
    <script src="../js/initMap.js"></script>
    <!-- 城市 -->
    <script src="./city.js"></script>
    <!-- 主题 -->
    <script src="../js/theme.js"></script>
    <!-- 通过城市名称获取坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <!-- 基于WebGL的地理信息可视化库,可以用来展示大量基于3D的地理信息点线面数据 -->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <!-- 飞线动画 -->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
    <title>飞线汇聚</title>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_container {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
  </body>
</html>
<script type="text/javascript">
  // 获取坐标点 - lng: 121.487899, lat: 31.249162
  const cityCenter = mapv.utilCityCenter.getCenterByCityName("成都");
  console.log("中心城市：", cityCenter);
  // 初始化 map
  const map = initMap({
    tilt: 0, // 倾斜
    center: [cityCenter.lng, cityCenter.lat], // 坐标
    zoom: 5, // 放大比例
    style: darkStyle, // 主题默认darkStyle common.js查看
  });

  // 准备数据源 - 散点必须满足以下格式
  const initData = () => {
    const data = [];
    // 获取终点坐标（汇聚点）
    const targetCity = mapv.utilCityCenter.getCenterByCityName("成都");
    // 散落的点 - 第一个元素默认目标点
    const node_data = [
      {
        x: targetCity.lng,
        y: targetCity.lat,
      },
    ];
    // 表示边的关系（点和边的关系） 从 source 到 target
    const edge_data = [];
    // 飞线的数量
    let randomCount = 500;
    // 添加 起始城市
    for (let i = 0; i < randomCount; i++) {
      // 起始城市
      const startCity = mapv.utilCityCenter.getCenterByCityName(
        citys[parseInt(Math.random() * citys.length)]
      );
      // 省会城市周边随机坐标
      node_data.push({
        x: startCity.lng - 5 + Math.random() * 10,
        y: startCity.lat - 5 + Math.random() * 10,
      });
      edge_data.push({
        //  第一个元素默认目标点
        source: i + 1, // 起点、即 node_data 中第几个元素 所以默认第二个元素开始
        // 表示所有起点的终点都是 targetCity 的坐标 (即 node_data 第一个元素)
        target: 0, // 目标点
      });
    }
    // console.log('node_data -', node_data)
    // console.log('edge_data -', edge_data)
    // 边绑定算法 - 计算多边聚合
    const fbundling = mapv
      .utilForceEdgeBundling()
      .nodes(node_data)
      .edges(edge_data);
    const results = fbundling(); // 获取所有点数据
    // console.log('results:', results)
    for (let i = 0; i < results.length; i++) {
      const line = results[i]; // 每一条线
      const coordinates = [];
      for (let j = 0; j < line.length; j++) {
        coordinates.push([line[j].x, line[j].y]);
      }
      data.push({
        geometry: {
          type: "LineString",
          coordinates: coordinates,
        },
      });
    }
    console.log("data = ", data);
    return data;
  };

  // 绘制数据源
  const setData = (data) => {
    // 初始化图层
    const view = new mapvgl.View({ map });
    // 初始化飞线对象
    const flylineLayer = new mapvgl.LineLayer({
      color: "rgba(55, 50, 250, 0.3)",
      blend: "lighter", // 叠加模式(线汇聚出现白色效果)
    });
    // 将飞线对象添加到图层
    view.addLayer(flylineLayer);
    // 绑定数据源
    flylineLayer.setData(data);

    // 初始化运动点对象
    const linePointLayer = new mapvgl.LinePointLayer({
      size: 4, // 点的大小
      speed: 10, // 运动速度
      color: "rgba(255, 255, 0, 0.6)", // 点的颜色
      animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点的动画类型
      shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 点的形状
      blend: "lighter", // 点交汇处理方式
    });
    // 将点对象添加到图层
    view.addLayer(linePointLayer);
    // 绑定数据源
    linePointLayer.setData(data);
  };
  const data = initData();
  setData(data);
</script>
